<template>
    <div>
     <a-row :gutter="24" v-if="userInfo.type ===1">
      <a-col :xl="6" :style="{ marginBottom: '24px' }">
       <chart-card title="园区数量" :total="otherObj.parkNumber">
        </chart-card>
      </a-col>
      <a-col :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="已禁用" :total="otherObj.disabledNumber"">
        </chart-card>
      </a-col>
    </a-row>
       <a-row :gutter="24" v-if="userInfo.type ===2">
      <a-col :xl="8" :style="{ marginBottom: '24px' }">
       <chart-card title="关联园区数量" :total="otherObj.count">
        </chart-card>
      </a-col>
      <a-col :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card title="签约即将到期" :total="otherObj.expiringNumber">
        </chart-card>
      </a-col>
      <a-col :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card title="签约已到期" :total="otherObj.expiredNumber">
        </chart-card>
      </a-col>
    </a-row>
    <div class="warpper-box">
        <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
        <a-button type="danger" v-action:parkAddBtn @click="add(true)" icon="plus">新增</a-button>
        <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="id" :data-source="table.loadData">
          <span slot="status" slot-scope="text, record">
            <a-popconfirm
              :title="record.status === 1 ? '禁用状态，账号不能使用？确认禁用！':'确认启用！'"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handelUserStatusChange(record)" >
              <a-switch checked-children="启用" un-checked-children="禁用" 
              :checked="record.status === 1 ? true : false"
              default-checked />
            </a-popconfirm>
          </span>
          <span slot="fees" slot-scope="text,record">
              <div v-for="(item,index) in record.fees" :key="index">
                【{{item.amountStart}} {{item.operator}} {{item.amountEnd}}】{{item.serviceRatio}}%
              </div>
            </span>
            <span slot="agreement" slot-scope="text,record">
              <a-button type="link" @click="priwre(record)">预览</a-button>
            </span>
          <span slot="action" slot-scope="text, record">
              <a v-action:parkEditBtn @click="add(record)">查看与编辑</a>
              <a-divider v-action:parkEditBtn type="vertical" />
              <a v-action:parkDetailBtn @click="queryParkDetail(record)">详情</a>
          </span>
        </a-table>
       <sys-park-form ref="createForm" @ok="formSubmit" />
       <park-detail ref="createParkDetail" />
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
 import md5 from 'md5'
 import { ChartCard } from '@/components'
 import SysParkForm from './modules/sys_park_form'
 import ParkDetail from './modules/park_detail'
import { 
  getSysParkList,
  getSysParkDetails,
  getSysParkEnable
} from '@/api/manage/park'
import { 
  getEnterpriseIdRelationParkList
} from '@/api/manage/enterprise'
import {
  PARAMS_PARK,
  COLUMNS_SYS_PARK,
  COLUMNS_ENTERPRISE_PARK,
  OPTION_BLOCK,
  OPTION_INLINE
} from './modules/form'
import { previewFile } from '@/utils/util'
import { mapGetters } from 'vuex'
export default {
  name: 'park',
  components: {
    ChartCard,
    SysParkForm,
    ParkDetail
  },
  data () {
    return {
      keys:0,
      params:{
        fApi:{},
        rule:PARAMS_PARK,
        option:OPTION_INLINE
      },
      table:{
          columns:COLUMNS_SYS_PARK,
          loadData:[],
          pagination:{
              current:1,
              pageSize: 10,
              total:0,
              showSizeChanger: true,
					showQuickJumper: true,
              pageSizeOptions: ["10", "20", "50", "100"],
              showTotal: total => `共有 ${total} 条数据`,
          }
      },
      otherObj:{
        enterpriseNumber:0,
        expiringNumber:0,
        disabledNumber:0,
        expiredNumber:0,
        count:0,
        expiredNumber:0,
        expiringNumber:0
      }
    }
  },
  mounted () {
    this.initData();
  },
   computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    initData(){
      this.$nextTick(()=>{
        if(this.userInfo.type === 2){
          this.params.fApi.hidden(true,'add');
        }else{
          this.params.fApi.hidden(false,'add');
        }
      })
       if(this.userInfo.type === 2){
         this.table.columns = COLUMNS_ENTERPRISE_PARK
       }else if(this.userInfo.type === 1){
          this.table.columns = COLUMNS_SYS_PARK
       }
       this.loadTable(true);
    },
    async loadTable(flag){
       let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
         params.name = this.params.fApi.getValue('name');
         params.contact = this.params.fApi.getValue('contact');
         params.contactPhone = this.params.fApi.getValue('contactPhone');
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      if(this.userInfo.type === 2){
        params.enterpriseId = this.userInfo.relationId;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      if(this.userInfo.type === 2){
        const res = await getEnterpriseIdRelationParkList(params);
        if(res.code ==='1'){
          this.table.loadData = res.data;
          this.table.pagination.total = res.data.total || 0;
          for(var keys in res){
            this.otherObj[keys] = res[keys];
          }
        }
      }else if(this.userInfo.type === 1){
        const res = await getSysParkList(params);
        if(res.code ==='1'){
          this.table.loadData = res.data.content;
          this.table.pagination.total = res.data.total || 0;
          for(var keys in res){
            this.otherObj[keys] = res[keys];
          }
        }
      }
      
    },
     handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    async handelUserStatusChange(el){
        let parmas = {};
        parmas.status = el.status === 1 ? 2:1;
        parmas.id = el.id;
        const {code} = await getSysParkEnable(parmas);
        if(code === '1'){
            this.$message.success('操作成功');
            this.loadTable(false);
        }
    },
    async add(rows){
      if(rows === true){
         this.$refs.createForm.add(true)
      }else{
        const {code,data} = await getSysParkDetails(rows.id);
        if(code === '1'){
          data.areaCode = data.areaCode ? data.areaCode.split(','):[];
          this.$refs.createForm.add(data);
        }
      }
    },
    queryParkDetail(rows){
      this.$refs.createParkDetail.add(rows);
    },
    priwre(rows){
      previewFile(rows.agreement);
    },
    formSubmit(){
      this.$message.success('操作成功');
      this.loadTable(true);
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>


